<template>
	<div>
		<div class="menu">
			<template
				v-for="(menuItem, index) in props.menuConfig"
				:key="index"
			>
				<template v-if="menuItem.isDivider">
					<el-divider />
				</template>

				<el-tooltip
					:effect="tooltipTheme"
					:content="menuItem.descript"
					:placement="tooltipPlacement"
					:disabled="disabledTooltip"
				>
					<div class="menu-item flex-center">
						<span class="title">{{ menuItem.label }}:</span>
						<div class="config">
							<template v-if="menuItem.type === 'input'">
								<el-input
									v-model="configAttr[menuItem.field]"
									size="small"
								/>
							</template>

							<template v-else-if="menuItem.type === 'enmu'">
								<el-select
									v-model="configAttr[menuItem.field]"
									size="small"
								>
									<el-option
										v-for="item in menuItem.list"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</el-select>
							</template>

							<template v-else-if="!menuItem.type || menuItem.type === 'switch'">
								<el-switch
									v-model="configAttr[menuItem.field]"
									size="small"
									active-text="on"
									inactive-text="off"
								/>
							</template>
						</div>
					</div>
				</el-tooltip>
			</template>
		</div>
	</div>
</template>

<script lang="ts" setup>

	// 通用菜单

	import { ref, computed, toRefs } from "vue";

	export interface Props {
		menuConfig: CommonMenuType;
		modelValue: Record<string, any>;
		tooltipTheme?: "dark" | "light",
		tooltipPlacement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end",
		disabledTooltip?: boolean,
	}

	const props = withDefaults(defineProps<Props>(), {
		menuConfig: () => [],
		modelValue: () => ({} as any),
		tooltipTheme: "light",
		tooltipPlacement: "left",
		disabledTooltip: false,
	});

	const emit = defineEmits(["update:modelValue"]);

	const configAttr = computed({
		get() {
			return props.modelValue;
		},
		// 配置更新
		set(val) {
			emit("update:modelValue", val);
		}
	});

</script>

<style lang="scss" scoped>
	.menu {
		width: 100%;
		.menu-item {
			margin: 4px;
			.title {
				flex: 1;
				font-size: 12px;
			}
			.config {
				flex: 1;
				text-align: center;
			}
		}

		:deep(div.el-divider.el-divider--horizontal) {
			margin: 18px 0;
		}
	}
</style>
